<template>
	<div id="Login-all">
		<div id='logo'>ChatGPT</div>
		<div id='login'>
			<el-card class="box-card">
				<div id="form">
					<el-input
					      placeholder="请输入用户名"
					      v-model="username"
					      clearable>
					    </el-input>
					<el-input placeholder="请输入密码" v-model="password" show-password></el-input>
					<el-input placeholder="请确认密码" v-model="passwords" show-password></el-input>
					<el-button :plain="true" type="primary" v-on:click="registry">注册</el-button>
					
				</div>
			</el-card>
			<div id="clock">
				<div id="time">{{time}}</div>
				<div id="date">{{date}}</div>
			</div>
			
			<div id="copyright">Copyright © 2025 TalkSage, All Rights Reserved</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	import Request from '@/utils/request'
	export default{
		data(){
			return{
				username:"",
				password:"",
				time:"",
				date:"",
				passwords:""
			}
		},
		mounted(){
			this.$nextTick(()=>{
				this.update_clock();
			})
		},
		methods:{
			update_clock:function(){
				var d=new Date();
				var year=d.getFullYear();
				var month=d.getMonth()+1;
				if(month<10){
					month="0"+month;
				}
				var day=d.getDay();
				if(day<10){
					day="0"+day;
				}
				var hour=d.getHours();
				if(hour<10){
					hour="0"+hour;
				}
				var minute=d.getMinutes();
				if(minute<10){
					minute="0"+minute;
				}
				this.time=hour+":"+minute;
				this.date=year+"/"+month+"/"+day
			},
			registry:function(e){
				if(!this.username){
					this.$message.error("用户名不能为空！")
				}
				if(!this.password){
					this.$message.error("请输入密码！")
				}
				if(this.passwords=="" && this.password!=""){
					this.$message.error("请输入确认密码！")
				}
				if(this.passwords !="" && this.password!=""){
					if(this.password !=this.passwords){
						this.$message.error("密码不一致！")
					}
					else{
						Request.post('/user/registry',{username: this.username,password: this.password})
						.then(res=>{
								if(res.code==200){
									this.open2();
									// window.location.href = '/';
									setTimeout(() => {
									  // 使用Vue.js的$router对象跳转页面
									  this.$router.push('/')
									}, 1500) // 3000毫秒即3秒钟
								}
								if(res.code==10003)
									this.open3(res.msg)
								if(res.code==10002){
									this.open4();
								}
							})
					}
				}
				// axios({
				//   method: 'post',
				//   url: '/api/user/registry',
				//   data: {
				//     username: this.username,
				//     password: this.password
				//   }
				// })
				
				},
				
				open2:function() {
				        this.$message({
				          message: '注册成功，正在跳转登录页面！',
				          type: 'success'
				        });
				      },
					  open4:function(e) {
					          this.$message.error(e);
					        },
							open3(e) {
							        this.$message({
							          message: e,
							          type: 'warning'
							        });
							      },
			}
		}
</script>

<style scoped>
#Login-all{
	position: fixed;
	height: 100%;
	width: 100%;
	top:0;
	left: 0;
	background-image: linear-gradient(
	90deg,
	#39e274,
	purple
	);
	background-size: 400%;
	animation: myanimation 10s infinite;
}
@keyframes myanimation {
	0%{
		background-position: 0% 50%;
	}
	50%{
		background-position: 100% 50%;
	}
	100%{
		background-position: 0% 50%;
	}
}
#logo{
	color:aliceblue;
	font-size: 50px;
	font-weight: 800;
	position: absolute;
	top:15%;
	left: 15%;
}
.box-card{
	position: absolute;
	top: 30%;
	left: 40%;
	width: 500px;
	height: 300px;
	background-color: rgba(255, 255, 255, 0.4);
	border-radius: 15px;
}
#form{
	line-height: 60px;
	padding-left: 15px;
	padding-right: 15px;
	text-align: center;
	
}
#clock{
	color: aliceblue;
	position: absolute;
	top: 70%;
	left: 10%;
	text-align: center;
}
#time{
	font-size: 100px;
}
#date{
	font-size: 35px;
}
#copyright{
	color: aliceblue;
	position: absolute;
	top:97%;
	left: 40%;
}
#register{
	position: absolute;
	top: 57%;
	left: 62%;
	color: aliceblue;
}
</style>